<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="../Public/css/mui.min.css">
    <link rel="stylesheet" href="../Public/css/swiper.min.css">
    <link rel="stylesheet" href="../Public/fonts/iconfont.css">
    <link rel="stylesheet" href="../Public/css/global.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body class="index">
    <header id="header" class="mui-bar mui-bar-nav">
            <div class="mui-title mui-input-row mui-search">
                <input type="search" class="mui-input-clear" placeholder="搜索全部商品">
            </div>
        <a href="shopcar.html" class="iconfont icon-gouwucheshoppingcart mui-pull-right"></a>
    </header>
    <div class="mui-bar mui-bar-tab">
        <a href="" class="mui-tab-item mui-active">
            <span class="iconfont icon-shouye"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a href="classification.html" class="mui-tab-item">
            <span class="iconfont icon-gengduo"></span>
            <span class="mui-tab-label">分类</span>
        </a>
        <a href="shopcar.html" class="mui-tab-item" style="position:relative">
            <span class="iconfont icon-gouwucheshoppingcart"></span>
            <span class="mui-tab-label">购物车</span>
            <span class="mui-badge badge-num">1</span>
        </a>
        <a href="usercenter.html" class="mui-tab-item">
            <span class="iconfont icon-crmtubiao32"></span>
            <span class="mui-tab-label">个人中心</span>
        </a>
    </div>
    <div class="mui-content">
        <div class="swiper-container lunbo">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="images/temp/banner1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/temp/banner2.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/temp/banner3.jpg" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="mui-row button-area">
            <div class="mui-col-sm-3 mui-col-xs-3">
                <li class="mui-table-view-cell">
                    <a href="hotgoods.html">
                        <p class="nav-block" style="background-color:#ff5a36;">
                            <i class="iconfont icon-youhui" style="top:-4px"></i>
                        </p>
                        <div class="mui-media-body">今日特惠</div>
                    </a>
                </li>
            </div>
            <div class="mui-col-sm-3 mui-col-xs-3">
                <li class="mui-table-view-cell">
                    <a href="integralshop.html">
                        <p class="nav-block" style="background-color:#0b8eba;">
                            <i class="iconfont icon-jifen"></i>
                        </p>
                        <div class="mui-media-body">积分商城</div>
                    </a>
                </li>
            </div>
            <div class="mui-col-sm-3 mui-col-xs-3">
                <li class="mui-table-view-cell">
                    <a href="shopcar.html">
                        <p class="nav-block" style="background-color:#eea200;">
                            <i class="iconfont icon-gouwuche-copy"></i>
                        </p>
                        <div class="mui-media-body">购物车</div>
                    </a>
                </li>
            </div>
            <div class="mui-col-sm-3 mui-col-xs-3">
                <li class="mui-table-view-cell">
                    <a href="usercenter.html">
                        <p class="nav-block" style="background-color:#27b197;">
                            <i class="iconfont icon-yonghuzhongxin"></i>
                        </p>
                        <div class="mui-media-body">用户中心</div>
                    </a>
                </li>
            </div>
        </div>
        <div class="mui-row">
            <div class="mui-col-sm-4 mui-col-xs-4 goods-new">
                <p class="goods-title" style="color:#ff4c48">每日上新</p>
                <p class="goods-info">超值好货 每天更新</p>
                <img src="images/temp/book1.png" alt="">
            </div>
            <div class="mui-col-sm-8 mui-col-xs-8" style="border-left:1px solid #e8e8e8">
                <div class="mui-col-sm-12 mui-col-xs-12 goods-discover clear" style="border-bottom:1px solid #e8e8e8">
                    <div class="goods-wrap">
                        <p class="goods-title" style="color:#04b2f9">发现</p>
                        <text class="goods-info">发现精彩 爆款集结</text>
                    </div>
                    <img src="images/temp/book1.png" alt="">
                </div>
                <div class="mui-row">
                    <div class="mui-col-sm-6 mui-col-xs-6 goods-recommend" style="border-right:1px solid #e8e8e8">
                        <p class="goods-title" style="color:#ff960c">都在买</p>
                        <text class="goods-info">流行款式 服务大众</text>
                        <img src="images/temp/book2.png" alt="">
                    </div>
                    <div class="mui-col-sm-6 mui-col-xs-6 goods-recommend">
                        <p class="goods-title" style="color:#93c800">超值推荐</p>
                        <text class="goods-info">物美价廉 高性价比</text>
                        <img src="images/temp/book3.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- 积分抵扣 -->
        <div class="mui-card">
            <div class="mui-card-header">
                <span style="font-size:14px">积分抵扣 <span style="font-size:12px;color:#8d8d8d">太热门啦，超级抵钱!</span></span><a href="deduction.html"><span class="mui-pull-right" style="font-size:12px;color:#9b9b9b">更多<i class="iconfont icon-you"></i></span></a>
            </div>
            <div class="card-content">
                <div class="goods-container swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="mui-row">
                                <div class="mui-col-sm-6 mui-col-xs-6 goods-list">
                                    <a href="goods.html">
                                        <img src="images/temp/book2.png" alt="">
                                        <p>高考复习讲义初三冲刺必备指导</p>
                                        <div><span class="price">￥<e class="price-info">21.9</e></span><span class="exchange mui-pull-right">积分抵￥<e>3.80</e></span></div>
                                    </a>
                                </div>
                                <div class="mui-col-sm-6 mui-col-xs-6 goods-list">
                                    <a href="">
                                        <img src="images/temp/book2.png" alt="">
                                        <p>高考复习讲义初三冲刺必备指导</p>
                                        <div><span class="price">￥<e class="price-info">21.9</e></span><span class="exchange mui-pull-right">积分抵￥<e>3.80</e></span></div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="mui-row">
                                <div class="mui-col-sm-6 mui-col-xs-6 goods-list">
                                    <a href="goods.html">
                                        <img src="images/temp/book2.png" alt="">
                                        <p>高考复习讲义初三冲刺必备指导</p>
                                        <div><span class="price">￥<e class="price-info">21.9</e></span><span class="exchange mui-pull-right">积分抵￥<e>3.80</e></span></div>
                                    </a>
                                </div>
                                <div class="mui-col-sm-6 mui-col-xs-6 goods-list">
                                    <a href="">
                                        <img src="images/temp/book2.png" alt="">
                                        <p>高考复习讲义初三冲刺必备指导</p>
                                        <div><span class="price">￥<e class="price-info">21.9</e></span><span class="exchange mui-pull-right">积分抵￥<e>3.80</e></span></div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="mui-row">
                                <div class="mui-col-sm-6 mui-col-xs-6 goods-list">
                                    <a href="">
                                        <img src="images/temp/book2.png" alt="">
                                        <p>高考复习讲义初三冲刺必备指导</p>
                                        <div><span class="price">￥<e class="price-info">21.9</e></span><span class="exchange mui-pull-right">积分抵￥<e>3.80</e></span></div>
                                    </a>
                                </div>
                                <div class="mui-col-sm-6 mui-col-xs-6 goods-list">
                                    <a href="">
                                        <img src="images/temp/book2.png" alt="">
                                        <p>高考复习讲义初三冲刺必备指导</p>
                                        <div><span class="price">￥<e class="price-info">21.9</e></span><span class="exchange mui-pull-right">积分抵￥<e>3.80</e></span></div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
        <!-- 购物返金币 -->
        <div class="mui-card">
            <div class="mui-card-header">
                <span style="font-size:14px">购物返金币 <span style="font-size:12px;color:#8d8d8d">超值购，都在买!</span></span><a href="returnintegral.html"><span class="mui-pull-right" style="font-size:12px;color:#9b9b9b">更多<i class="iconfont icon-you"></i></span></a>
            </div>
            <div class="card-content">
                <div class="goods-container swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="mui-row">
                                <div class="mui-col-sm-6 mui-col-xs-6 goods-list">
                                    <a href="">
                                        <img src="images/temp/book1.png" alt="">
                                        <p>高考复习讲义初三冲刺必备指导</p>
                                        <div class="return-info"><span class="exchange">积分抵￥<e>3.80</e></span><span class="return-integral">购物返<e>10</e>积分</span></div>
                                        <div><span class="price">￥<e class="price-info">21.9</e></span><span class="already-sale mui-pull-right">已抢<e>6000</e>件</span></div>
                                    </a>
                                </div>
                                <div class="mui-col-sm-6 mui-col-xs-6 goods-list">
                                    <a href="">
                                        <img src="images/temp/book1.png" alt="">
                                        <p>高考复习讲义初三冲刺必备指导</p>
                                        <div class="return-info"><span class="exchange">积分抵￥<e>3.80</e></span><span class="return-integral">购物返<e>10</e>积分</span></div>
                                        <div><span class="price">￥<e class="price-info">21.9</e></span><span class="already-sale mui-pull-right">已抢<e>6000</e>件</span></div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="mui-row">
                                <div class="mui-col-sm-6 mui-col-xs-6 goods-list">
                                    <a href="">
                                        <img src="images/temp/book1.png" alt="">
                                        <p>高考复习讲义初三冲刺必备指导</p>
                                        <div class="return-info"><span class="exchange">积分抵￥<e>3.80</e></span><span class="return-integral">购物返<e>10</e>积分</span></div>
                                        <div><span class="price">￥<e class="price-info">21.9</e></span><span class="already-sale mui-pull-right">已抢<e>6000</e>件</span></div>
                                    </a>
                                </div>
                                <div class="mui-col-sm-6 mui-col-xs-6 goods-list">
                                    <a href="">
                                        <img src="images/temp/book1.png" alt="">
                                        <p>高考复习讲义初三冲刺必备指导</p>
                                        <div class="return-info"><span class="exchange">积分抵￥<e>3.80</e></span><span class="return-integral">购物返<e>10</e>积分</span></div>
                                        <div><span class="price">￥<e class="price-info">21.9</e></span><span class="already-sale mui-pull-right">已抢<e>6000</e>件</span></div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
        <!-- 热门推荐 -->
        <div class="mui-card">
            <div class="mui-card-header">
                <span style="font-size:14px">热门推荐 <span style="font-size:12px;color:#8d8d8d">超值购，都在买!</span></span><a href="hotgoods.html"><span class="mui-pull-right" style="font-size:12px;color:#9b9b9b">更多<i class="iconfont icon-you"></i></span></a>
            </div>
            <div class="card-content">
                <div class="goods-container swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="mui-row">
                                <div class="mui-col-sm-6 mui-col-xs-6 goods-list">
                                    <a href="">
                                        <img src="images/temp/book1.png" alt="">
                                        <p>高考复习讲义初三冲刺必备指导</p>
                                        <div><span class="price">￥<e class="price-info">21.9</e></span><span class="already-sale mui-pull-right">已抢<e>6000</e>件</span></div>
                                    </a>
                                </div>
                                <div class="mui-col-sm-6 mui-col-xs-6 goods-list">
                                    <a href="">
                                        <img src="images/temp/book1.png" alt="">
                                        <p>高考复习讲义初三冲刺必备指导</p>
                                        <div><span class="price">￥<e class="price-info">21.9</e></span><span class="already-sale mui-pull-right">已抢<e>6000</e>件</span></div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="mui-row">
                                <div class="mui-col-sm-6 mui-col-xs-6 goods-list">
                                    <a href="">
                                        <img src="images/temp/book1.png" alt="">
                                        <p>高考复习讲义初三冲刺必备指导</p>
                                        <div><span class="price">￥<e class="price-info">21.9</e></span><span class="already-sale mui-pull-right">已抢<e>6000</e>件</span></div>
                                    </a>
                                </div>
                                <div class="mui-col-sm-6 mui-col-xs-6 goods-list">
                                    <a href="">
                                        <img src="images/temp/book1.png" alt="">
                                        <p>高考复习讲义初三冲刺必备指导</p>
                                        <div><span class="price">￥<e class="price-info">21.9</e></span><span class="already-sale mui-pull-right">已抢<e>6000</e>件</span></div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../Public/libs/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src="../Public/libs/mui.min.js" charset="utf-8"></script>
<script src="../Public/libs/swiper.jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
    mui('.mui-bar-tab').on('tap','a',function(){
        location.href = this.getAttribute('href');
    })
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 720*100 + 'px';
    var mySwiper = new Swiper ('.lunbo', {
        autoplay: 3500,
        loop: true,
        pagination: '.swiper-pagination',

    })
    var goodsSwiper = new Swiper ('.goods-container', {
        pagination: '.swiper-pagination'
    })
</script>
</html>
